<template>
  <div id="container">
    <!-- 顶部组件 -->
    <TopSearch @searchData="searchData"></TopSearch>

    <!-- 页面头部栏 -->
    <div id="header">
      <span>优惠券列表</span>
      <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteMore">
        批量删除
      </el-button>
      <router-link to="/main/addCoupon">
        <el-button type="primary" icon="el-icon-plus" size="small">
          新增优惠券
        </el-button>
      </router-link>
    </div>

    <!-- 动态渲染表格数据 -->
    <el-table :data="tableData" border style="margin-top: 1rem; width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center">
      </el-table-column>
      <el-table-column label="序号" width="80" align="center">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="优惠券名称" width="110" align="center">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="优惠券类型" width="110" align="center">
        <template slot-scope="scope">{{ scope.row.type }}</template>
      </el-table-column>
      <el-table-column label="面值" width="80" align="center">
        <template slot-scope="scope">{{ scope.row.fanceValue }}</template>
      </el-table-column>
      <el-table-column label="使用条件" width="120" align="center">
        <template slot-scope="scope">{{ scope.row.conditions }}</template>
      </el-table-column>
      <el-table-column label="有效时间" width="250" align="center">
        <template slot-scope="scope">{{ scope.row.validTime }}</template>
      </el-table-column>
      <el-table-column label="数量" width="80" align="center">
        <template slot-scope="scope">{{ scope.row.number }}</template>
      </el-table-column>
      <el-table-column label="生效状态" width="90" align="center">
        <template slot-scope="scope">{{ scope.row.effectiveStatus }}</template>
      </el-table-column>
      <el-table-column label="发布状态" width="90" align="center">
        <template slot-scope="scope">{{ scope.row.releaseStatus }}</template>
      </el-table-column>
      <el-table-column label="操作人" width="120" align="center">
        <template slot-scope="scope">{{ scope.row.operator }}</template>
      </el-table-column>
      <el-table-column label="备注" width="200" align="center">
        <template slot-scope="scope">{{ scope.row.remarks }}</template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editCoupon(scope.row.id)">编辑</el-button>
          <el-button size="mini" type="success" @click="changeReleaseStatus(scope.row.id)">下架</el-button>
          <el-button size="mini" type="danger" @click="deleteData(scope.row.id)">删除</el-button>
          <el-button size="mini" type="warning" @click="updateReleaseStatus(scope.row.id)">发布</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <Page :totalCount="totalCount" @shareData="shareData"></Page>
  </div>
</template>

<script>
import TopSearch from './../../components/common/search_1'
import Page from './../../components/common/Pagination.vue'
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      totalCount: 0,
      nowPage: 1,
      pageCount: 5
    }
  },
  components: {
    TopSearch,
    Page
  },
  created() {
    this.getCouponType()
    // 在页面创建时获取表格数据并渲染
    this.getCouponList(this.nowPage, this.pageCount);
    // 动态获取优惠券类型
    // this.getCouponType();
  },
  methods: {
    //分页
    shareData(v) {
      this.nowPage = v.nowPage
      this.pageCount = v.pageCount

      this.getCouponList(this.nowPage, this.pageCount)
    },

    // 搜索功能
    searchData(v) {
      this.tableData = v.data
      this.totalCount = v.count
      // console.log(v);
    },

    // 获取优惠券列表
    async getCouponList(page, pageSize, name, couponType, stime, etime) {
      const { data: res } = await this.axios.post('/coupon/list', {
        page: page,
        pageSize: pageSize,
        name: name,
        couponType: couponType,
        stime: stime,
        etime: etime,
      });
      console.log(res);
      let tableData = res.data;
      // console.log(tableData);

      // 遍历数组修改数据
      tableData.forEach(item => {
        // 将时间戳转换为本地时间
        let startTime = this.timeTransfer(item.startTime)
        let endTime = this.timeTransfer(item.endTime)
        item.startTime = startTime
        item.endTime = endTime
        item.validTime = startTime + '-' + endTime
        // 修改生效状态
        if (item.effectiveStatus == 0) item.effectiveStatus = '未开始'
        else if (item.effectiveStatus == 1) item.effectiveStatus = '未过期'
        else if (item.effectiveStatus == 2) item.effectiveStatus = '已过期'
        // 修改发布状态
        if (item.releaseStatus == 0) item.releaseStatus = '未发布'
        else if (item.releaseStatus == 1) item.releaseStatus = '已发布'
      })
      this.totalCount = res.count
      this.tableData = res.data
    },

    // 时间戳转换为当地时间的方法
    timeTransfer(timestamp) {
      let time = new Date(timestamp)
      let year = time.getFullYear()
      let month = time.getMonth() + 1
      let date = time.getDate()
      let hours = time.getHours()
      let minute = time.getMinutes()

      if (month < 10) {
        month = '0' + month
      }
      if (date < 10) {
        date = '0' + date
      }
      if (hours < 10) {
        hours = '0' + hours
      }
      if (minute < 10) {
        minute = '0' + minute
      }

      return year + '-' + month + '-' + date + ' ' + hours + ':' + minute
    },

    //删除单个数据
    async deleteData(id) {
      const { data: res } = await this.axios.get('/coupon/delete/' + id)
      this.getCouponList()
    },

    // 批量删除数据的方法
    // 批量获取数据的id
    handleSelectionChange(val) {
      this.multipleSelection = []
      val.forEach(item => {
        this.multipleSelection.push(item.id)
      })
      // console.log(this.multipleSelection);
    },
    // 批量删除数据
    async deleteMore() {
      // console.log("数组", this.multipleSelection);
      const { data: res } = await this.axios.post('/coupon/deleteByIds', {
        ids: this.multipleSelection
      })
      this.getCouponList()
    },

    // 优惠券类型接口
    async getCouponType() {
      const { data: res } = await this.axios.post('/CouponType/list', {
        page: 1,
        pageSize: 5
      })
    },

    // 点击发布按钮更改发布状态为发布
    async updateReleaseStatus(vid) {
      const { data: res } = await this.axios.get(
        '/coupon/updateReleaseStatus' + `?id=${vid}&releaseStatus=1`
      )
      // console.log(res);
      this.getCouponList()
    },

    // 点击下架按钮更改发布状态为未发布
    async changeReleaseStatus(vid) {
      const { data: res } = await this.axios.get(
        '/coupon/updateReleaseStatus' + `?id=${vid}&releaseStatus=0`
      )
      // console.log(res);
      this.getCouponList()
    },

    // 点击编辑按钮在本地暂存id数据
    editCoupon(vid) {
      sessionStorage.setItem('vid', vid)
      this.$router.push('/main/editCoupon/' + vid)
    }
  }
}
</script>

<style lang="less" scoped>
#container {
  font-size: 1.5rem;
  vertical-align: center;
}

#header {
  margin-top: 1rem;
  height: 3rem;
  line-height: 3rem;
  background-color: lightgray;
  padding: 1.5rem;
  & button {
    float: right;
    margin-left: 2rem;
  }
}
</style>